//
// Common Example Styles
// ------------------------------



// normalize
html {
	font-family: sans-serif;
}
body {
	background-color: white;
	color: #333;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
}



// Layout

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	padding: 1em;
}

.example-header {
	margin-bottom: 50px;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
}

.example-footer {
	margin-top: 50px;
	border-top: 1px solid #ccc;
	padding: 20px 0;
	font-size: 12px;
	color: #999;
}


// Type

a {
	color: #08c;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}
p {
	margin-top: 2em;
}
h1, h2, h3, h4, h5, h6 {
	color: #222;
	margin: 0;
}

h3 {
	margin: 20px 0;
}


// Small Devices

@media (max-width: 480px) {
	body {
		font-size: 14px;
		font-weight: 400;
	}
}


//
// Select Control
// ------------------------------

@import "../../less/component.less";
